
<style lang='scss'>
.label-modal {
  .ivu-modal {
    top: 20px;
  }
}
</style>

<template>
    <div>
        <!-- 重新排版 -->
        <div>
            <Row>
                <Col span="16" style="padding-right:7px">
                    <!-- 运单信息 -->
                    <div class="newbase-box">
                        <div class="newbase-title">运单信息
                            {{itemApiResponse.trackingCode}}
                        </div>
                        <div>
                            <Form class="clearfix padding-right-15 margin-top-5" :label-width="160"  ref='otherData' :model='otherData'>
                                <Row>
                                    <Col span="12">
                                    <FormItem prop='carrier' label="运营商:" >
                                        <span>{{otherData.carrier}}</span>
                                    </FormItem>
                                    </Col>
                                    <Col span="12">
                                    <FormItem label="承运商服务:" >
                                        <span>{{this.getServiceCode(otherData.serviceCode)}}</span>
                                    </FormItem>
                                    </Col>
                                    <Col span="12">
                                    <FormItem label="关联单号:" >
                                        <span>{{otherData.parcelNo}}</span>
                                    </FormItem>
                                    </Col>
                                    <Col span="12">
                                    <FormItem label="客户组织:" >
                                        <span>{{this.getOrgName(otherData.organizationId)}}</span>
                                    </FormItem>
                                    </Col>
                                    <Col span="12">
                                    <FormItem label="是否取消:">
                                        <span>{{['否','是','已打印'][otherData.cancel]}}</span>
                                    </FormItem>
                                    </Col>

                                    <Col span="12">
                                    <FormItem label="预估费用:" >
                                        <span>{{otherData.rate}}&nbsp;{{otherData.currency}}</span>
                                    </FormItem>
                                    </Col>
                                    <Col span="12">
                                    <FormItem label="包裹尺寸:" >
                                        <span>{{parcelData.parcelLength}} * {{parcelData.parcelWidth}} * {{parcelData.parcelHeight}} {{parcelData.parcelLengthUnit}}</span>
                                    </FormItem>
                                    </Col>
                                    <Col span="12">
                                    <FormItem label="包裹重量:" >
                                        <span>{{parcelData.parcelWeight}} {{parcelData.parcelWeightUnit}}</span>
                                    </FormItem>
                                    </Col>
                                    <Col span="12">
                                    <FormItem label="物流状态:" >
                                        <span>{{getStatus(incrementData.trackingStatus)}}</span>
                                    </FormItem>
                                    </Col>
                                    <Col span="12">
                                    <FormItem label="包裹数量:" >
                                        <span>1</span>
                                    </FormItem>
                                    </Col>
                                    <Col span="12">
                                    <FormItem label="保价服务" >
                                        <span>{{incrementData.valuation == 0 ? '否' : '是'}}</span>
                                    </FormItem>
                                    </Col>
                                    <Col span="12">
                                    <FormItem label="签名服务">
                                        <span >{{incrementData.signfor ? incrementData.signfor == 0 ? '否' : '是' : '否'}}</span>
                                    </FormItem>
                                    </Col>
                                </Row>
                            </Form>
                        </div>
                    </div>
                    <Row class="margin-top-15">
                        <!-- 发货 收货信息 -->
                        <Col span="12">
                            <div class="newbase-box" style="margin-right:7px;height:390px">
                            <div class="newbase-title">发件地址</div>
                                <Form class="clearfix padding-right-15 margin-top-5" ref="shipper" :model="shipperData" :label-width="160" >
                                    <FormItem prop='shipperCode' label="发货方Code:" >
                                        <span>{{shipperData.shipperCode}}</span>
                                    </FormItem>
                                    <FormItem prop='shipperContactName' label="发货方名称:" class="relative">
                                        <span>{{shipperData.shipperContactName}}</span>
                                    </FormItem>
                                    <FormItem prop="shipperCountrycode" label="国家:" >
                                        <span>{{shipperData.shipperCountrycode}}</span>
                                    </FormItem>
                                    <FormItem prop="shipperState" label="州:" >
                                        <span>{{shipperData.shipperState}}</span>
                                    </FormItem>
                                    <FormItem prop="shipperCity" label="城市:" >
                                        <span>{{shipperData.shipperCity}}</span>
                                    </FormItem>
                                    <FormItem prop="shipperZipcode" label="邮编:" >
                                        <span>{{shipperData.shipperZipcode}}</span>
                                    </FormItem>
                                    <FormItem prop="shipperContactPhone" label="联系电话:" >
                                        <span>{{shipperData.shipperContactPhone}}</span>
                                    </FormItem>
                                    <FormItem prop="shipperAddressLine1" label="详细地址:">
                                        <span>{{shipperData.shipperAddressLine1}}</span>
                                    </FormItem>
                                </Form>
                            </div>
                        </Col>
                        <Col span="12">
                            <div class="newbase-box" style="margin-left:8px;height:390px">
                                <div class="newbase-title">收件地址</div>
                                <Form class="clearfix padding-right-15 margin-top-5" ref="receiver" :model="receiverData" :label-width="160" >
                                    <FormItem prop='receiverContactName' label="收货方名称:" class="relative">
                                        <span>{{receiverData.receiverContactName}}</span>
                                    </FormItem>
                                    <FormItem prop="receiverCountrycode" label="国家:" >
                                        <span>{{receiverData.receiverCountrycode}}</span>
                                    </FormItem>
                                    <FormItem prop="receiverState" label="州:" >
                                        <span>{{receiverData.receiverState}}</span>
                                    </FormItem>
                                    <FormItem prop="receiverCity" label="城市:" >
                                        <span>{{receiverData.receiverCity}}</span>
                                    </FormItem>
                                    <FormItem prop="receiverZipcode" label="邮编:" >
                                        <span>{{receiverData.receiverZipcode}}</span>
                                    </FormItem>
                                    <FormItem prop="receiverContactPhone" label="联系电话:" >
                                        <span>{{receiverData.receiverContactPhone}}</span>
                                    </FormItem>
                                    <FormItem prop="receiverAddressLine1" label="详细地址1:">
                                        <span>{{receiverData.receiverAddressLine1}}</span>
                                    </FormItem>
                                    <FormItem  label="详细地址2:">
                                        <span>{{receiverData.receiverAddressLine2 || '--'}}</span>
                                    </FormItem>
                                    <!-- <FormItem  label="详细地址3:">
                                        <span>{{receiverData.receiverAddressLine3 || '--'}}</span>
                                    </FormItem> -->
                                </Form>
                            </div>
                        </Col>
                    </Row>
                </Col>
                <Col span="8" style="padding-left:8px">
                    <div class="newbase-box" style="height:469px;overflow:auto">
                        <div class="newbase-title">跟踪信息</div>
                        <div class="padding-15">
                            <Timeline v-if="detailList.length>0">
                                <TimelineItem v-for="(item,index) in detailList" :key="index"><div>{{item.city||'--'}},{{item.state||'--'}},{{item.country||'--'}},{{item.status||'--'}},{{item.statusDetail||'--'}}</div>
                                <div>{{item.datetime||'--'}}</div></TimelineItem>
                            </Timeline>
                            <div v-else class="text-center">暂无数据...</div>
                        </div>
                    </div>
                    <div class="newbase-box margin-top-15">
                        <div class="newbase-title">参考选项</div>
                        <Form class="clearfix padding-right-15" ref="parcel" :model="parcelData" :label-width="160">
                            <FormItem label="Reference" >
                                <div>{{itemApiResponse.reference || '--'}}</div>
                            </FormItem>
                            <FormItem label="PO" >
                                <div>{{itemApiResponse.po || '--'}}</div>
                            </FormItem>
                            <FormItem label="Invoice" >
                                <div>{{itemApiResponse.invoice || '--'}}</div>
                            </FormItem>
                            <FormItem label="Department" >
                                <div>{{itemApiResponse.department || '--'}}</div>
                            </FormItem>
                        </Form>
                    </div>
                </Col>
            </Row>
        </div>
        <div class="margin-top-15">
            <Row>
                <Col span="16" style="padding-right:7px">
                    <div class="newbase-box">
                        <div class="newbase-title">实际费用明细</div>
                        <div style="padding: 10px">
                            <Table
		                    	:columns="actualColumns"
		                    	size="small"
		                    	:data="actualDetails"
		                    	ref="table"
		                    	:loading="loading"
		                    	border
		                    	highlight-row
		                    ></Table>
                        </div>
                    </div>
                </Col>
                <Col span="8" style="padding-left:8px">
                    <div class="newbase-box">
                        <div class="newbase-title">预估费用明细</div>
                        <div style="padding: 10px">
                            <Table
		                    	:columns="estimatedColumns"
		                    	size="small"
		                    	:data="estimatedDetails"
		                    	ref="table"
		                    	:loading="loading"
		                    	border
		                    	highlight-row
		                    ></Table>
                        </div>
                    </div>
                </Col>
            </Row>
        </div>
        <compModal
			v-model="modalProps.show"
			v-bind="modalProps"
			@on-confirm="modalProps.show=false"
            @on-close="closemodalprops"
		>
            <component ref="cusref" :is="modalProps.component"  v-bind="modalProps" @on-close="closemodalprops" v-on="modalProps.on"></component>
            <!-- <footer slot="footer" v-show="false"></footer> -->
        </compModal>
		<Spin size="large" fix v-if="loading"></Spin>
    </div>
</template>

<script>
import {
    HttpLabelDifferenceDetail,
    HttpLabelDifferenceDetailFee,
    HttpDirectCredit,
    HttpIgnoreCredit
} from '@/service/api/views';
import {mapGetters,mapState} from 'vuex'
export default {
	components: {
    },
	data() {
		return {
			loading: true,
			id: this.$route.params.id,
            trackNo: this.$route.query.trackingNo,
            detailList:[],
            modalProps:{
                show:false
            },
			shipperData: {
				shipperCountrycode: '',
				shipperState: '',
				shipperCity: '',
				shipperZipcode: '',
				shipperContactName: '',
				shipperContactPhone: '',
				shipperAddressLine1: '',
				shipperCode: '',
			},
			receiverData: {
				receiverContactName: '',
				receiverCountrycode: '',
				receiverState: '',
				receiverCity: '',
				receiverZipcode: '',
				receiverContactName: '',
				receiverContactPhone: '',
                receiverAddressLine1: '',
                receiverAddressLine2: '',
                receiverAddressLine3: '',
			},
			parcelData: {
				parcelLengthUnit: 'inch',
				parcelWeightUnit: 'lbs',
				parcelLength: '',
				parcelWidth: '',
				parcelHeight: '',
				parcelWeight: '',
			},
			incrementData: {
				valuation: 0,
				parcelDeclareValue: '',
				trackingStatus: '',
				signfor: 0,
			},
			otherData: {
				carrier: '',
				serviceCode: '',
				parcelNo: '',
				labelPrintAmount: 0,
				status: 0,
				cancel: 0,
				trackingCode: '',
				rate: '',
				currency: '',
                systemSource:0,
                apiRequest:'',
                apiResponse:'',
                isInternational:0,
                organizationId:0,
			},
            itemApiResponse:{},
            actualDetails: [],
            actualColumns: [
                {
                    title: "收费项",
                    key: 'costName'
                },
                {
                    title: "实际金额",
                    key: 'cost'
                },
                {
                    title: "发票号",
                    key: 'invoiceNo'
                },
                {
                    title: "发票日期",
                    key: 'invoiceDate'
                },
                {
                    title: "结算日期",
                    key: 'settlementAt'
                },
                {
					title: '操作',
					minWidth: 200,
					render: (h, { row, index }) => {
                        return <div>
                            <Button type="primary" size="small" style="margin-right: 15px" onClick={this.directCredit.bind(this, row.id)}>直接入账</Button>
                            <Button size="small" style="width: 64px" onClick={this.ignore.bind(this, row.id)}>忽略</Button>
                        </div>
					},
				},
			],
            estimatedDetails: [],
            estimatedColumns: [
                {
                    title: "收费项",
                    key: 'costName'
                },
                {
                    title: "预估金额",
                    key: 'estimatedCost'
                },
                {
                    title: "创建日期",
                    key: 'estimatedCreatedAt'
                },
			],
		};
	},
	created() {
		this.getLabelDetail();
	},
	computed:{
        ...mapGetters('dictionary',['getSysAllList']),
	},
	methods: {
        directCredit(val) {
            this.modalProps = {
                title: '直接入账',
                showDesc: true,
                alert: 'primary',
                show: true,
                params: {
                    diffId: val
                },
                ajaxRequest: HttpDirectCredit,
                callback:(res)=>{
                    this.getLabelDetail();
                    this.$Message.success(res.message);
                    this.modalProps.show = false;
                }
            }
        },
        ignore(val) {
            this.modalProps = {
                title: '忽略',
                showDesc: true,
                alert: 'primary',
                show: true,
                params: {
                    diffId: val
                },
                ajaxRequest: HttpIgnoreCredit,
                callback:(res)=>{
                    this.getLabelDetail();
                    this.$Message.success(res.message);
                    this.modalProps.show = false;
                }
            }
        },
        closemodalprops(){
            this.modalProps.show = false;
            this.$emit('on-openCloseable');
        },
        getStatus(val) {
            let type = ''
            switch (val) {
                case 'unknown': type = "初始化"; break;
                case 'pre_transit': type = "待发运"; break;
                case 'in_transit': type = "在途"; break;
                case 'out_for_delivery': type = "派送中"; break;
                case 'available_for_pickup': type = "派送中"; break;
                case 'delivered': type = "已妥投"; break;
                case 'return_to_sender': type = "已退回"; break;
                case 'cancelled': type = "已取消"; break;
                case 'failure': type = "异常"; break;
                case 'error': type = "异常"; break;
            }
            return type;
        },
        getServiceCode(value){
            let val = ''
            switch(value){
                case 'FEDXG': val = 'Ground';break;
                case 'FEDSP': val = 'Smart Post';break;
                case 'FEDHD': val = 'Home Delivery';break;
                case 'UPSG': val = 'UPSG';break;
            }
            return val
        },
        getOrgName(value){
            let val = this.getSysAllList.filter(item=>item.value == value)[0] || [];
            return val.label || '--'
        },
		async getLabelDetail() {
            this.loading = true;
            await HttpLabelDifferenceDetail({
				trackingNo: this.trackNo,
			}).then(res => {
				const data = res.data || {};
				Object.keys(this.shipperData).forEach(key => {
					this.shipperData[key] = data[key];
				});
				Object.keys(this.receiverData).forEach(key => {
					this.receiverData[key] = data[key];
				});
				Object.keys(this.parcelData).forEach(key => {
					this.parcelData[key] = data[key];
				});
				Object.keys(this.incrementData).forEach(key => {
					this.incrementData[key] = data[key];
				});
				this.incrementData.valuation = this.incrementData.valuation == 1 ? 1 : 0;
				Object.keys(this.otherData).forEach(key => {
					this.otherData[key] = data[key];
				});
                this.itemApiResponse = res.data;
				this.loading = false;
			}, err => {
				this.loading = false;
				this.$Message.error(err.message);
			});
            await HttpLabelDifferenceDetailFee({
				trackingNo: this.trackNo,
			}).then(res => {
				this.actualDetails = res.data.actualDetails;
				this.estimatedDetails = res.data.estimatedDetails.filter(item=>item !== null);
				this.loading = false;
			}, err => {
				this.loading = false;
				this.$Message.error(err.message);
			});
		},
	},
};
</script>

